<template>
	<view class="product">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<scroll-view scroll-y="true" class="scroll-view" @scroll="onScroll" :scroll-into-view="scrollToEle"
			scroll-with-animation>
			<up-swiper :list="goods.images" height="320" circular :autoplay="true" radius="5" :indicator="true"
				imgMode="aspectFill" bgColor="#ffffff" :id="'scrollTo_' + 0"></up-swiper>
			<view class="product-base">
				<view class="name">
					{{goods.name}}
				</view>
				<view class="price" v-if="goods.exchange_type == 1">
					<text>{{goods.points}}</text>
					<text style="font-size: 24rpx; margin: 0 10rpx;">积分</text>
				</view>
				<view class="price" v-if="goods.exchange_type == 2">
					<text>{{goods.points}}</text>
					<text style="font-size: 24rpx; margin: 0 10rpx;">积分</text>
					<text v-if="goods.sale_price > 0 && goods.points > 0">+</text>
					<text v-if="goods.sale_price > 0">￥{{goods.sale_price}}</text>
				</view>
				<view class="price" v-if="goods.exchange_type == 0">
					<text v-if="goods.sale_price > 0">￥{{goods.sale_price}}</text>
				</view>
				<view class="history-price">
					<text style="font-size: 18rpx; margin: 0 10rpx;">原价</text>
					<text>￥{{goods.market_price}}</text>
				</view>

				<u-grid :col="4" :border="false">
					<u-grid-item>库存：{{goods.stock}}</u-grid-item>
					<u-grid-item>售量：{{goods.sales_sum}}</u-grid-item>
					<!-- <u-grid-item>好评：{{goods.rating}}%</u-grid-item> -->
				</u-grid>
			</view>

			<view v-if="true" class="product-evaluate" :id="'scrollTo_' + 1">
				<u-cell :value-style="{ color: '#2b85e4', fontSize: '24rpx' }" :isLink="true" arrow-direction="right"
					@click="$u.route({ url: '/pages/product/more-evaluate?goods_id=' + goods.id })">
					<template #title>
						<view class="custom-title">
							<text>评价</text>
							<text>(好评度{{goods.rating}}%)</text>
						</view>
					</template>
				</u-cell>
				<goods-evaluate :evaluate-info="item" v-for="(item, index) in evaluateList"
					:key="index"></goods-evaluate>
			</view>

			<!-- #ifdef APP -->
			<view class="product-video" :id="'scrollTo_' + 2" v-if="goods.video">
				<video id="myVideo" :src="$imageUrl(goods.video)" :autoplay="true" loop="true"
					:show-play-btn="false"></video>
			</view>
			<!-- #endif -->

			<view class="product-detail" :id="'scrollTo_' + 3">
				<!-- #ifdef H5 || APP -->
				<view class="content" v-html="goods.content"></view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<rich-text :nodes="goods.content"></rich-text>
				<!-- #endif -->
			</view>
		</scroll-view>

		<view class="tool-bar">
			<view class="menu-group">
				<u-grid :col="3" :border="false">
					<u-grid-item @click="collection()">
						<u-icon name="star" :labelColor="starActive" :color="starActive" size="24" margin-top="12"
							label="收藏" label-size="12" label-pos="bottom">
						</u-icon>
					</u-grid-item>

					<u-grid-item @click="pageRoute('/servePages/customer-service/customer-service')">
						<u-icon name="server-man" size="24" margin-top="12" label="客服" label-size="12"
							label-pos="bottom">
						</u-icon>
					</u-grid-item>

					<u-grid-item>
						<view class="buy-btn">
							<u-button @click="showBuySpec()" type="warning" shape="circle">立即购买</u-button>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 商品规格 -->
		<goods-sku ref="skuRef" :goods="goods"></goods-sku>
		<!-- <goods-buy-sku ref="buySku" :goods="goods"></goods-buy-sku> -->
		<!-- 分享 -->
		<!-- <base-share ref="share"></base-share> -->
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商品详情',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		goods_id: 0,
		goods: {},

		evaluateList: [],

		starActive: "",
		favorited: 0,

		current: 0,
		scrollTop: 0,
		scrollToEle: 'scrollTo_' + 0,
	});

	const skuRef = ref(null);

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			state.goods_id = opt.id;
			getDetail();
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDetail() {
		request.get('goods/detail', {
			goods_id: state.goods_id
		}).then(res => {
			console.log('商品详情', res);
			state.goods = res.data;
			state.favorited = res.data.favorited;
		})
	}

	function onScroll(e) {
		console.log('onScroll', e);
		state.scrollTop = e.detail.scrollTop;
	}

	function onChange(index) {
		state.current = index;
		state.scrollToEle = `scrollTo_${index}`;
	}

	function showBuySpec() {
		skuRef.value.open();
	}

	function collection() {
		if (state.favorited == 1) {
			state.starActive = '';
			state.favorited = 0;
		} else {
			state.starActive = '#ffc30f';
			state.favorited = 1;
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		goods_id,
		goods,
		evaluateList,
		starActive,
		favorited,
		current,
		scrollTop,
		scrollToEle,
	} = toRefs(state);
</script>

<style lang="scss">
	.product {
		overflow: hidden;
		height: 100%;
		padding-bottom: 0rpx;
		display: flex;
		flex-direction: column;

		.scroll-view {
			overflow: hidden;
			flex: 1;

			.product-base {
				padding: $m24;
				background-color: $u-bg-reverse-color;

				.name {
					font-size: $font-32;
					font-weight: bold;
					color: $u-main-color;
				}

				.price {
					text {
						&:nth-child(1) {
							font-size: $font-32;
							font-weight: bold;
							color: #fa3534;
						}

						&:nth-child(2) {
							font-size: $font-32;
							font-weight: bold;
							color: #fa3534;
						}

						&:nth-child(3) {
							font-size: $font-32;
							font-weight: bold;
							color: #fa3534;
						}
					}
				}

				.history-price {
					text {
						font-size: $font-26;
						margin: 0 20rpx;
						text-decoration: line-through;
						color: #808080;
					}
				}
			}

			.product-evaluate {
				margin-top: $m24;
				background-color: $u-bg-reverse-color;

				.custom-title {
					@include f-center;

					text {
						&:nth-child(1) {
							font-size: $font-30;
							font-weight: bold;
							color: $u-main-color;
						}
					}
				}
			}

			.product-detail {
				margin: $m24 0 $m24;
				padding: $m24;
				background-color: $u-bg-reverse-color;

				img,
				image {
					width: 100%;
				}
			}
		}

		.tool-bar {
			position: fixed;
			left: 0rpx;
			bottom: calc(var(--window-bottom));
			right: 0rpx;
			z-index: 9;
			height: 98rpx;
			padding: 0 $m24;
			background-color: $u-bg-reverse-color;

			.menu-group {
				.buy-btn {
					padding: 0 $m12;
				}
			}
		}
	}
</style>